<template>
  <div  v-loading="loading">
    <el-row :gutter="40" v-for="i in rowNumber">
      <el-col :span="6" v-for="(item, index) in courseList.slice((i-1)*4, 4*i)" :key="index">
        <div class="course-box" @click="toCourseDetail(item.id)">
          <div class="image-url">
            <img :src="item.coverImage">
          </div>
          <div class="course-info">
            <div class="course-name">
              <span>{{ item.title }}</span>
            </div>
            <div class="teacher">
              <span>{{ item.teacherName }}</span>
            </div>
          </div>
          <el-row class="course-details">
            <el-col :span="12" class="course-details-left">
              <span>{{ item.describe }}</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listCourse, getCourse } from "@/api/course/course";
import { getBaseUrl } from "@/api/file/file";
export default {
  name: 'index',
  data() {
    return {
      baseUrl: "",
      loading: true,
      courseList: [
        {
          imageUrl: 'http://img-ph-mirror.nosdn.127.net/kX_URvWcbjEBbFQEOqJrtQ==/6619105079188646274.jpg?imageView&type=webp',
          courseName: '功能汉语速成',
          teacher: '徐雨隽',
          info: '进行至第7周',
          studentNum: 890,
        },
        {
          imageUrl: 'http://img-ph-mirror.nosdn.127.net/kX_URvWcbjEBbFQEOqJrtQ==/6619105079188646274.jpg?imageView&type=webp',
          courseName: '民俗文化鉴赏',
          teacher: '阙祥才',
          info: '进行至第7周',
          studentNum: 3283,
        },
        {
          imageUrl: 'http://img-ph-mirror.nosdn.127.net/kX_URvWcbjEBbFQEOqJrtQ==/6619105079188646274.jpg?imageView&type=webp',
          courseName: '环境问题观察',
          teacher: '张勇',
          info: '进行至第6周',
          studentNum: 1409,
        },
        {
          imageUrl: 'http://img-ph-mirror.nosdn.127.net/kX_URvWcbjEBbFQEOqJrtQ==/6619105079188646274.jpg?imageView&type=webp',
          courseName: '大学生科技创新课程之中美青年创客大赛',
          teacher: '罗大兵',
          info: '进行至第7周',
          studentNum: 938,
        },
        {
          imageUrl: 'http://img-ph-mirror.nosdn.127.net/kX_URvWcbjEBbFQEOqJrtQ==/6619105079188646274.jpg?imageView&type=webp',
          courseName: '经济数学—线性代数',
          teacher: '杨文霞',
          info: '进行至第7周',
          studentNum: 2962,
        },
        {
          imageUrl: 'http://img-ph-mirror.nosdn.127.net/kX_URvWcbjEBbFQEOqJrtQ==/6619105079188646274.jpg?imageView&type=webp',
          courseName: '计算机组织与结构',
          teacher: '赖晓晨',
          info: '进行至第6周',
          studentNum: 3859,
        },
        {
          imageUrl: 'http://img-ph-mirror.nosdn.127.net/kX_URvWcbjEBbFQEOqJrtQ==/6619105079188646274.jpg?imageView&type=webp',
          courseName: '微观经济学',
          teacher: '文建东',
          info: '进行至第7周',
          studentNum: 9032,
        },
        {
          imageUrl: 'http://img-ph-mirror.nosdn.127.net/kX_URvWcbjEBbFQEOqJrtQ==/6619105079188646274.jpg?imageView&type=webp',
          courseName: '工程图学',
          teacher: '蒋丹',
          info: '进行至第6周',
          studentNum: 4970,
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        subject: null,
        title: null,
        describe: null,
        teacherId: null,
        teacherName: null,
        createdBy: null,
        deleteFlag: null
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询课程列表 */
    getList() {
      this.loading = true;
      listCourse(this.queryParams).then(response => {
        console.log(response)
        this.courseList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      getBaseUrl().then(res => {
        this.baseUrl = res.msg;
      })
    },
  //  跳转课程详情
    toCourseDetail(id) {
      this.$router.push('/course/courseinfo/' + id)
    }
  },
  computed:{
    rowNumber(){
      return Math.ceil(this.courseList.length / 4);
    }
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px;

}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

img {
  width: 100%;
}

.course-box {
  padding: 10px;
  box-shadow: 0 0 5px #ccc;
  margin-bottom: 10px;
  cursor: pointer;
}

.course-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.course-details {
  font-size: 14px;
  padding-top: 10px;
  color: #a8a8b3;
}

.course-details-left{
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-url img{
  height: 150px;
}
</style>
